<template>
  <div class="container">
    <div class="Bar-above">
      <span class="gjz">关键字 </span><el-input v-model="input"></el-input>
      <div class="okEmpty">
        <el-button style="width: 70px" @click="input = ''">清空</el-button>
        <el-button
          class="blue"
          style="width: 70px"
          @click="filterArticles(input)"
          >搜索</el-button
        >
      </div>
    </div>
    <div class="quantity"><i class="el-icon-info"></i>数据一共{{ zts }}条</div>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="id" label="编号" width="250px"> </el-table-column>
      <el-table-column prop="questionType" label="题型" width="85px">
        <template v-slot="scope">
          <p v-if="scope.row.questionType == 1">单选</p>
          <p v-if="scope.row.questionType == 2">多选</p>
          <p v-if="scope.row.questionType == 3">简单</p>
        </template>
      </el-table-column>
      <el-table-column label="题目编号" width="190px">
        <template v-slot="scoped">
          <div
            style="color: rgb(0, 153, 255)"
            v-for="(item, index) in scoped.row.questionIDs"
            :key="index"
            @click="tzyl(item.id)"
          >
            {{ item.number }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="addTime" label="录入时间" width="250">
      </el-table-column>
      <el-table-column prop="totalSeconds" label="答题时间(s)">
      </el-table-column>
      <el-table-column prop="accuracyRate" label="正确率(%)"> </el-table-column>
      <el-table-column prop="userName" label="录入人"> </el-table-column>
      <el-table-column prop="id" label="操作">
        <!-- <template slot-scope="scope">
        <el-button
          type="danger"
          icon="el-icon-delete"
          circle
          @click="del(scope.row.id)"
        > </el-button>
        </template> -->
        <template v-slot="scope">
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            size="small"
            @click="del(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.page"
        :page-sizes="[10, 15, 20, 50]"
        :page-size="query.pagesize"
        layout=" prev, pager, next, sizes, jumper"
        :total="zts"
      >
      </el-pagination>
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="45%">
      <el-card>
        <el-row class="headBox">
          <el-col :span="24">
            <el-descriptions :column="4">
              <el-descriptions-item label="【题型】">{{
                questionTypeList()
              }}</el-descriptions-item>
              <el-descriptions-item label="【编号】">{{
                timuyulan.id
              }}</el-descriptions-item>
              <el-descriptions-item label="【难度】">{{
                difficultyList()
              }}</el-descriptions-item>
              <el-descriptions-item label="【标签】">{{
                timuyulan.tags
              }}</el-descriptions-item>
              <el-descriptions-item label="【学科】">{{
                timuyulan.subjectName
              }}</el-descriptions-item>
              <el-descriptions-item label="【目录】">{{
                timuyulan.directoryName
              }}</el-descriptions-item>
              <el-descriptions-item label="【方向】">{{
                timuyulan.direction
              }}</el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
        <el-row class="headBox">
          <el-col :span="24">
            <div class="divBox">【题干】:</div>
            <div>
              <p style="color: blue" v-html="timuyulan.question"></p>
              <div v-if="timuyulan.questionType == 1">
                <p>单选题 选项：（以下选中的选项为正确答案）</p>
                <el-radio-group :value="radio">
                  <el-radio
                    class="dadioDan"
                    :label="item.isRight"
                    v-for="item in timuyulan.options"
                    :key="item.id"
                    >{{ item.code }} : {{ item.title }}</el-radio
                  >
                </el-radio-group>
              </div>
              <div v-if="timuyulan.questionType == 2">
                <p>多选题 选项：（以下选中的选项为正确答案）</p>
                <el-checkbox-group :value="checkList">
                  <el-checkbox
                    class="dadioDan"
                    v-for="item in timuyulan.options"
                    :key="item.id"
                    :label="item.isRight"
                    >{{ item.title }}</el-checkbox
                  >
                </el-checkbox-group>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row class="headBox">
          <el-col :span="24">
            <div class="divBox3">
              【参考答案】:
              <el-button type="danger" @click="isVideo = true"
                >参考答案预览</el-button
              >
            </div>
            <div class="video" v-if="isVideo">
              <video
                class="video"
                autoplay
                controls="controls"
                :src="timuyulan.videoURL"
              ></video>
            </div>
          </el-col>
        </el-row>
        <el-row class="headBox">
          <el-col :span="24">
            <div class="divBox2">
              【答案解析】: <span class="ps" v-html="timuyulan.answer"></span>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="divBox">【题目备注】: {{ timuyulan.remarks }}</div>
          </el-col>
        </el-row>
        <el-row class="footBox">
          <el-col :span="24">
            <el-button type="primary" @click="off">关闭</el-button>
          </el-col>
        </el-row>
      </el-card>
    </el-dialog>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '../../api/hmmm/questions'
import { questionType, difficulty } from '@/api/hmmm/constants'
export default {
  name: 'que',
  data () {
    return {
      input: '',
      tableData: [],
      timuyulan: [],
      items: '',
      yeshu: '',
      tiaoshu: '',
      query: {
        page: 1, // 当前页面
        pagesize: 10 // 页面显示的条数
      },
      zts: 0, // 总共的条数,
      dialogVisible: false,
      radio: 1, // 单选默认选中
      checkList: [1], // 多选默认选中
      isVideo: false // 视频播放
    }
  },
  created () {
    this.randoms()
  },
  methods: {
    off () {
      this.dialogVisible = false
    },
    difficultyList () {
      let res = ''
      difficulty.forEach((item) => {
        if (item.value === Number(this.timuyulan.difficulty)) {
          res = item.label
        }
      })
      return res
    },
    questionTypeList () {
      let res = ''
      questionType.forEach((item) => {
        if (item.value === Number(this.timuyulan.questionType)) {
          res = item.label
        }
      })
      return res
    },
    // 题组预览
    async tzyl (id) {
      const res = await detail({ id })
      this.timuyulan = res.data
      this.dialogVisible = true
      console.log(this.timuyulan)
    },
    // 筛选功能
    filterArticles (input) {
      const shaixuan = []
      this.tableData.forEach((item) => {
        if (item.id.indexOf(input) !== -1) {
          shaixuan.push(item)
        }
      })
      this.tableData = shaixuan
      console.log(shaixuan)
      this.input = ''
      this.query.page = 1
      this.zts = shaixuan.length
    },
    // 删除功能
    async del (id) {
      const confirmRes = await this.$confirm('删除试题是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch((err) => err)
      if (confirmRes === 'cancel') return this.$message('您取消了删除')
      await removeRandoms({ id })
      this.$message('已经删除')
      this.randoms()
    },
    handleSizeChange (val) {
      this.query.pagesize = val
      this.randoms()
    },
    handleCurrentChange (val) {
      this.query.page = val
      this.randoms()
    },
    async randoms () {
      const res = await randoms(this.query)
      this.tableData = res.data.items
      this.zts = res.data.counts
    }
  }
}
</script>

<style scoped>
.container {
  margin: 25px;
}
.headBox {
  border-bottom: 5px solid rgb(207, 204, 204);
}
.dadioDan {
  display: block;
  padding: 8px 0;
}
p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
.divBox {
  margin-top: 10px;
}
.divBox2 {
  /* line-height: 50px; */
  height: 50px;
}
.divBox3 {
  line-height: 50px;
  /* height: 50px; */
}
.footBox {
  padding: 20px 0;
  float: right;
}
.ps {
  display: inline-block;
  margin: 0 !important;
  height: 50px;
}
.video {
  width: 400px;
  height: 300px;
  margin-bottom: 10px;
}
</style>
<style scoped>
.el-dialog__body{
  padding: 0;
}
.blue {
  background-color: rgb(0, 153, 255);
  color: #f4f4f5;
}
.shangyi {
  margin-top: -15px;
  padding-left: 3px;
  border-bottom: 1px solid #000;
  height: 57px;
}
.shangyi li {
  list-style-type: none;
  float: left;
  margin-right: 85px;
  margin-bottom: 15px;
  font-size: 12px;
}
.xhx {
  border-bottom: 1px solid #000;
}
element.style {
  width: 100%;
}
.container {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 25px 65px;
}
.el-input--medium {
  width: 250px;
}
.gjz {
  font-weight: 600;
  color: #606266;
}
.okEmpty {
  float: right;
}
.quantity {
  margin-top: 10px;
  height: 45px;
  width: 100%;
  background-color: #f4f4f5;
  line-height: 45px;
  font-size: 15px;
  padding-left: 25px;
  border-radius: 12px;
  margin-bottom: 15px;
}
.el-icon-info {
  margin-right: 12px;
}
.block {
  margin-top: 15px;
  float: right;
}
.container {
  overflow: hidden;
}
</style>
